<template>
    <el-container>
        <el-header class="diagnostic-title">诊断依据</el-header>
        <el-row>
            <el-col :span="12">
                <span
                    v-show="!!diagnosticBasisData.suspicious"
                    class="position-suspicious"
                >
                    <span class="position-suspicious-sub position-suspicious-text">{{
                                suspiciousEnumByLabel.label
                            }}:</span>
                    <span
                        class="suspicious-round position-suspicious-sub"
                        :style="{background: suspiciousEnumByLabel.color}"
                    ></span>
                </span>
            </el-col>
            <el-col
                :span="5"
                :offset="5"
            >
                <span style="margin-left:16px;font-size:14px">选择分析源:</span>
                <el-select
                    v-model="analysisSource"
                    placeholder="请选择分析源"
                    size="mini"
                    @change="getNLPDiagnosis"
                >
                    <el-option
                        v-for="item in allElectronicMedicalDataArry"
                        :key="item.id"
                        :label="item.date"
                        :value="item.id"
                    >
                    </el-option>
                </el-select>
            </el-col>
            <el-col :span="2">
                <el-button
                    size="mini"
                    type="primary"
                    @click="getNlpSumarization"
                >汇总</el-button>
            </el-col>
        </el-row>
        <div class="content-main">
            <el-row>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="6"
                    :xl="4"
                >
                    <el-tag
                        class="tag-min-width"
                        effect="plain"
                        type="info"
                    >
                        姓名:{{ diagnosticBasisData.name }}
                    </el-tag>
                </el-col>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="6"
                    :xl="4"
                >
                    <el-tag
                        class="tag-min-width"
                        effect="plain"
                        type="info"
                    >
                        1.性别:{{ diagnosticBasisData.sex }}
                    </el-tag>
                </el-col>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="6"
                    :xl="4"
                >
                    <el-tag
                        class="tag-min-width"
                        effect="plain"
                        type="info"
                    >
                        2.年龄:{{ diagnosticBasisData.age }}
                    </el-tag>
                </el-col>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="6"
                    :xl="4"
                >
                    <el-tag
                        class="tag-min-width"
                        effect="plain"
                        type="info"
                    >
                        3.身高:{{ diagnosticBasisData.height }}CM
                    </el-tag>
                </el-col>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="6"
                    :xl="4"
                >
                    <el-tag
                        class="tag-min-width"
                        effect="plain"
                        type="info"
                    >
                        4.体重:{{ diagnosticBasisData.weight }}KG
                    </el-tag>
                </el-col>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="6"
                    :xl="4"
                >
                    <el-tag
                        class="tag-min-width"
                        effect="plain"
                        type="info"
                    >
                        BMI:{{ bmi}}
                    </el-tag>
                </el-col>
            </el-row>
        </div>
        <div class="content-main">
            <div class="sub-title">高危因素:</div>
            <el-row>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    :key="item.id"
                    v-for="item in riskFactors"
                >
                    <el-tag :type="item.value === 1 ? 'danger': item.value === 2 ? 'success': 'info' "><span
                            class="fix-width"
                            :title="item.id+item.text"
                        >{{
                            item.id
                        }}.{{ item.text }}:</span>
                        <el-radio-group :value="item.value.toString()">
                            <el-radio
                                fill="success"
                                label="1"
                            >是</el-radio>
                            <el-radio
                                fill="danger"
                                label="2"
                            >否</el-radio>
                            <el-radio label="3">
                                <i class="slash">/</i>
                            </el-radio>
                        </el-radio-group>
                    </el-tag>
                </el-col>
            </el-row>
        </div>
        <div class="content-main">
            <div class="sub-title">主要症状:</div>
            <el-row>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    :key="item.id"
                    v-for="item in mainSymptom"
                >
                    <el-tag :type="item.value === 1 ? 'danger': item.value === 2 ? 'success': 'info' "><span
                            class="fix-width"
                            :title="item.id+item.text"
                        >{{
                            item.id
                        }}.{{ item.text }}:</span>
                        <el-radio-group :value="item.value.toString()">
                            <el-radio
                                fill="success"
                                label="1"
                            >是</el-radio>
                            <el-radio
                                fill="danger"
                                label="2"
                            >否</el-radio>
                            <el-radio label="3"><i class="slash">/</i></el-radio>
                        </el-radio-group>
                    </el-tag>
                </el-col>
            </el-row>
        </div>
        <div class="content-main">
            <div class="sub-title">主要体征:</div>
            <el-row>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    :key="item.id"
                    v-for="item in mainSigns"
                >
                    <el-tag :type="item.value === 1 ? 'danger': item.value === 2 ?'success': 'info' "><span
                            class="fix-width"
                            :title="item.id+item.text"
                        >{{
                            item.id
                        }}.{{ item.text }}:</span>
                        <el-radio-group :value="item.value.toString()">
                            <el-radio
                                fill="success"
                                label="1"
                            >是</el-radio>
                            <el-radio
                                fill="danger"
                                label="2"
                            >否</el-radio>
                            <el-radio label="3"><i class="slash">/</i></el-radio>
                        </el-radio-group>
                    </el-tag>
                </el-col>
            </el-row>
        </div>
        <div class="content-main">
            <div class="sub-title">伴癌综合征:</div>
            <el-row>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    :key="item.id"
                    v-for="item in withAbuseSyndrome"
                >
                    <el-tag :type="item.value === 1 ? 'danger': item.value === 2 ?'success': 'info' "><span
                            class="fix-width"
                            :title="item.id+item.text"
                        >{{
                            item.id
                        }}.{{ item.text }}:</span>
                        <el-radio-group :value="item.value.toString()">
                            <el-radio
                                fill="success"
                                label="1"
                            >是</el-radio>
                            <el-radio
                                fill="danger"
                                label="2"
                            >否</el-radio>
                            <el-radio label="3"><i class="slash">/</i></el-radio>
                        </el-radio-group>
                    </el-tag>
                </el-col>
            </el-row>
        </div>
        <div class="content-main">
            <div class="sub-title">病史中关于相关检查的描述:</div>
            <el-row>
                <el-col
                    :xs="24"
                    :sm="24"
                    :md="12"
                    :lg="8"
                    :xl="6"
                    :key="item.id"
                    v-for="item in historyOfDescription"
                >
                    <el-tag :type="item.value === 1 ? 'danger': item.value === 2 ?'success': 'info' "><span
                            class="fix-width"
                            :title="item.id+item.text"
                        >{{
                            item.id
                        }}.{{ item.text }}:</span>
                        <el-radio-group :value="item.value.toString()">
                            <el-radio
                                fill="success"
                                label="1"
                            >是</el-radio>
                            <el-radio
                                fill="danger"
                                label="2"
                            >否</el-radio>
                            <el-radio label="3"><i class="slash">/</i></el-radio>
                        </el-radio-group>
                    </el-tag>
                </el-col>
            </el-row>
        </div>
        <div class="content-main">
            <div class="sub-title">最近本院胃镜检查结论:</div>
            <el-input
                type="textarea"
                :disabled="true"
                v-model="diagnosticBasisData.gastroscopyElectronicReport"
            />
        </div>
        <div class="content-main">
            <div class="sub-title">实验室检查:</div>
            <el-table
                :data="diagnosticBasisData.tableData"
                border
                style="width: 100%"
            >
                <el-table-column
                    align="center"
                    v-for="item in header"
                    :prop="item.code"
                    :label="item.label"
                    :key="item.code"
                >
                    <template slot-scope="scope">
                        <span
                            v-if="item.label == '高低标志' "
                            :class="[
                                        scope.row.ycts == '偏高'||scope.row.ycts == '偏低' ? 'redColor' : '',
                                    ]"
                        >
                            {{scope.row.ycts}}
                        </span>
                        <span v-else>{{scope.row[item.code] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </el-container>
</template>

<script>
import {
    otherInfo,
    riskFactors,
    mainSymptom,
    mainSigns,
    withAbuseSyndrome,
    historyOfDescription,
} from '@/client/consts/medicalLabels';
import { suspiciousStatus, Enum } from '@/client/consts/enum';

export default {
    name: 'DiagnosticBasis', // 诊断依据
    props: {},
    data() {
        return {
            allElectronicMedicalDataArry: [],
            analysisSource: '',
            riskFactors: riskFactors,
            mainSymptom: mainSymptom,
            mainSigns: mainSigns,
            withAbuseSyndrome: withAbuseSyndrome,
            historyOfDescription: historyOfDescription,
            diagnosticInfo: {
                ...riskFactors,
                ...mainSymptom,
                ...mainSigns,
                ...withAbuseSyndrome,
                ...historyOfDescription,
            },
            header: [
                {
                    code: 'medicalRecordNumber',
                    label: '病历号',
                },
                {
                    code: 'bgdhName',
                    label: '报告单号',
                },
                {
                    code: 'pathologicalNumber',
                    label: '病理编号',
                },
                {
                    code: 'consequenceTime',
                    label: '报告时间',
                },
                {
                    code: 'eventName',
                    label: '检验指标',
                },
                {
                    code: 'eventShort',
                    label: '简称',
                },
                {
                    code: 'consequence',
                    label: '检验结果',
                },
                {
                    code: 'unit',
                    label: '单位',
                },
                {
                    code: 'reference',
                    label: '参考值',
                },
                {
                    code: 'ycts',
                    label: '异常提示代码',
                },
                {
                    prop: 'outHospitalNo',
                    label: '住院号',
                },
                {
                    prop: 'applyForTime',
                    label: '采样时间',
                },
            ],
            diagnosticBasisData: {
                data: null,
                gastroscopyElectronicReport: '',
                tableData: [],
                name: '',
                sex: '',
                age: '',
                height: '',
                weight: '',
                suspicious: '高度可疑',
            },
            bmi: '',
        };
    },
    mounted() {
        this.getElectronicMedical();
    },
    methods: {
        getElectronicMedical() {
            const pathologyId = sessionStorage.getItem('pathologyId');
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/outpatientWithHospital/getTypeAndDate/by/${pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    res.data.data.forEach((item) => {
                        this.allElectronicMedicalDataArry.push(item);
                    });
                    //如果电子病历是单个，则不默认汇总，否则默认汇总
                    if (this.allElectronicMedicalDataArry.length === 1) {
                        this.analysisSource =
                            this.allElectronicMedicalDataArry[0].id;
                        this.getNLPDiagnosis(
                            this.allElectronicMedicalDataArry[0].id
                        );
                    } else {
                        this.getNlpSumarization();
                    }
                }
            });
        },

        getNLPDiagnosis(pId) {
            let that = this;
            const pathologyId = sessionStorage.getItem('pathologyId');
            that.$axios({
                method: 'GET',
                url: `/PROXY-Remote/diagnosticBasis/get/diagnosticBasis/by/${pathologyId}/${pId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let labelData = {};
                    Object.keys(that.diagnosticBasisData).forEach((item) => {
                        if (item !== 'showStatus') {
                            that.diagnosticBasisData[item] =
                                res.data.diagnosticBasis[item];
                        }
                    });
                    Object.keys(res.data.diagnosticBasis).forEach((item) => {
                        const labelItem = item.split('label');
                        if (labelItem.length === 2) {
                            labelData[labelItem[1]] = parseInt(
                                res.data.diagnosticBasis[item]
                            );
                        }
                    });
                    that.diagnosticBasisData.data = labelData;
                    that.bmi =
                        Number(
                            (that.diagnosticBasisData.weight /
                                that.diagnosticBasisData.height /
                                that.diagnosticBasisData.height) *
                                10000
                        ) || '';
                    that.diagnosticBasisData.gastroscopyElectronicReport =
                        res.data.gastroscopyElectronicReport;
                    that.diagnosticBasisData.tableData =
                        res.data.inspectionInformation;
                    that.assemblyParameters(that.diagnosticBasisData.data);
                }
            });
        },
        getNlpSumarization() {
            this.analysisSource = '';
            const pathologyId = sessionStorage.getItem('pathologyId');
            this.$axios({
                method: 'GET',
                url: `/PROXY-Remote/diagnosticBasis/get/diagnosticBasis/by/${pathologyId}`,
            }).then((res) => {
                if (res && res.data.code === 200) {
                    let labelData = {};
                    Object.keys(this.diagnosticBasisData).forEach((item) => {
                        if (item !== 'showStatus') {
                            this.diagnosticBasisData[item] =
                                res.data.diagnosticBasis[item];
                        }
                    });
                    Object.keys(res.data.diagnosticBasis).forEach((item) => {
                        const labelItem = item.split('label');
                        if (labelItem.length === 2) {
                            labelData[labelItem[1]] = parseInt(
                                res.data.diagnosticBasis[item]
                            );
                        }
                    });
                    this.diagnosticBasisData.data = labelData;
                    this.bmi =
                        Number(
                            (this.diagnosticBasisData.weight /
                                this.diagnosticBasisData.height /
                                this.diagnosticBasisData.height) *
                                10000
                        ) || '';
                    this.diagnosticBasisData.gastroscopyElectronicReport =
                        res.data.gastroscopyElectronicReport;
                    this.diagnosticBasisData.positiveDescription = '';
                    res.data.positiveDescription.forEach((outItem) => {
                        Object.keys(outItem).forEach((item) => {
                            let text = item + ':';
                            if (outItem[item].length > 0 && item != '时间') {
                                outItem[item].forEach((it) => {
                                    text += it + ',';
                                });
                                this.diagnosticBasisData.positiveDescription +=
                                    text;
                            }
                            if (item === '时间') {
                                this.diagnosticBasisData.positiveDescription +=
                                    outItem['时间'];
                            }
                        });
                    });

                    this.diagnosticBasisData.tableData =
                        res.data.inspectionInformation;

                    this.assemblyParameters(this.diagnosticBasisData.data);
                    // this.$message({
                    //     type: 'success',
                    //     message: '汇总完成',
                    // });
                }
            });
        },
        // 参数转换,
        assemblyParameters(args) {
            Object.keys(this.diagnosticInfo).forEach((item) => {
                const optionCheck = args[item.toString()];
                switch (this.diagnosticInfo[item].title) {
                    case 'riskFactors':
                        riskFactors[item].value = optionCheck;
                        break;
                    case 'mainSymptom':
                        mainSymptom[item].value = optionCheck;
                        break;
                    case 'mainSigns':
                        mainSigns[item].value = optionCheck;
                        break;
                    case 'withAbuseSyndrome':
                        withAbuseSyndrome[item].value = optionCheck;
                        break;
                    case 'historyOfDescription':
                        historyOfDescription[item].value = optionCheck;
                }
            });
            this.getTabList();
        },
        getTabList() {
            this.positiveFeaturesList = [];
            this.negativeFeaturesList = [];
            this.notDescribedList = [];
            Object.keys(this.diagnosticInfo).forEach((item) => {
                if (this.diagnosticInfo[item].value === 1) {
                    this.positiveFeaturesList.push(this.diagnosticInfo[item]);
                } else if (this.diagnosticInfo[item].value === 2) {
                    this.negativeFeaturesList.push(this.diagnosticInfo[item]);
                } else if (this.diagnosticInfo[item].value === 3) {
                    this.notDescribedList.push(this.diagnosticInfo[item]);
                }
            });
        },
    },

    watch: {},
    computed: {
        suspiciousEnumByLabel() {
            return new Enum(suspiciousStatus).itemByLabel(
                this.diagnosticBasisData.suspicious
            );
        },
        suspiciousEnumByValue() {
            return new Enum(suspiciousStatus).itemByLabel(
                this.diagnosticBasisData.suspicious
            );
        },
    },
};
</script>

<style scoped>
.el-container {
    background-color: #f0f0f0;
}

.content-main {
    padding: 8px;
    background-color: #ffffff;
    margin: 4px 12px;
}

.diagnostic-title {
    font-size: 20px;
}

.el-col,
.sub-title {
    margin-bottom: 12px;
}

.el-header,
.el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
}

.content-main >>> .el-table__header thead tr th {
    color: #909399;
}

.tag-min-width {
    min-width: 100px;
}

.position-suspicious {
    position: relative;
}

.position-suspicious-sub {
    position: absolute;
}

.position-suspicious-text {
    margin-top: 6px;
    width: 100px;
}

.suspicious-round {
    margin-left: 70px;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
}
.fix-width {
    display: inline-block;
    vertical-align: middle;
    width: 172px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
label.el-radio {
    margin-right: 10px;
}
.slash {
    position: relative;
    font-size: 20px;
}
.slash:before {
    position: absolute;
    font-size: 12px;
    content: 'N';
    left: -7px;
    top: 2px;
}
.slash:after {
    position: absolute;
    font-size: 12px;
    content: 'A';
    bottom: 2px;
    left: 4px;
}
.redColor {
    color: red;
}
/deep/ .el-radio__label {
    vertical-align: middle;
}
</style>
